import React from 'react';
import { connect } from 'dva';
import { Chart } from '@antv/g2';
import { Row, Col, Card, Icon } from 'antd';
const data1 = [
  { month: 'Jan', city: 'Tokyo', temperature: 7 },
  { month: 'Jan', city: 'London', temperature: 3.9 },
  { month: 'Feb', city: 'Tokyo', temperature: 6.9 },
  { month: 'Feb', city: 'London', temperature: 4.2 },
  { month: 'Mar', city: 'Tokyo', temperature: 9.5 },
  { month: 'Mar', city: 'London', temperature: 5.7 },
  { month: 'Apr', city: 'Tokyo', temperature: 14.5 },
  { month: 'Apr', city: 'London', temperature: 8.5 },
  { month: 'May', city: 'Tokyo', temperature: 18.4 },
  { month: 'May', city: 'London', temperature: 11.9 },
  { month: 'Jun', city: 'Tokyo', temperature: 21.5 },
  { month: 'Jun', city: 'London', temperature: 15.2 },
  { month: 'Jul', city: 'Tokyo', temperature: 25.2 },
  { month: 'Jul', city: 'London', temperature: 17 },
  { month: 'Aug', city: 'Tokyo', temperature: 26.5 },
  { month: 'Aug', city: 'London', temperature: 16.6 },
  { month: 'Sep', city: 'Tokyo', temperature: 23.3 },
  { month: 'Sep', city: 'London', temperature: 14.2 },
  { month: 'Oct', city: 'Tokyo', temperature: 18.3 },
  { month: 'Oct', city: 'London', temperature: 10.3 },
  { month: 'Nov', city: 'Tokyo', temperature: 13.9 },
  { month: 'Nov', city: 'London', temperature: 6.6 },
  { month: 'Dec', city: 'Tokyo', temperature: 9.6 },
  { month: 'Dec', city: 'London', temperature: 4.8 },
];
const data2 = [
  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];
const data3 = [
  { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
  { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
  { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
  { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
  { name: 'London', 月份: 'May', 月均降雨量: 47 },
  { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
  { name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
  { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
  { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
  { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
  { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
  { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
  { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
  { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
  { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
  { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
];
const data4 = [
  { item: '事例一', count: 40, percent: 0.4 },
  { item: '事例二', count: 21, percent: 0.21 },
  { item: '事例三', count: 17, percent: 0.17 },
  { item: '事例四', count: 13, percent: 0.13 },
  { item: '事例五', count: 9, percent: 0.09 },
];
class Dashboard extends React.Component {
  componentDidMount() {
    this.eChart1()
    this.eChart2()
    this.eChart3()
    this.eChart4()
  }
  eChart1() {
    // Step 1: 创建 Chart 对象
    const chart1 = new Chart({
      container: 'c1', // 指定图表容器 ID
      autoFit: true,
      height: 400
    });

    // Step 2: 载入数据源
    chart1.data(data1);

    chart1.scale({
      month: {
        range: [0, 1],
      },
      temperature: {
        nice: true,
      },
    });

    chart1.tooltip({
      showCrosshairs: true,
      shared: true,
    });

    chart1.axis('temperature', {
      label: {
        formatter: (val) => {
          return val + 'W';
        },
      },
    });

    chart1
      .line()
      .position('month*temperature')
      .color('city')
      .shape('smooth');
    chart1
      .point()
      .position('month*temperature')
      .color('city')
      .shape('circle')

    // Step 4: 渲染图表
    chart1.render();
  }
  eChart2() {
    const chart2 = new Chart({
      container: 'c2',
      autoFit: true,
      height: 300,
    });
    chart2.coordinate('polar');

    chart2.data(data2);
    chart2.scale('月均降雨量', {
      nice: true,
    });

    chart2.axis('月份', {
      grid: {
        alignTick: false,
        line: {
          style: {
            lineDash: null
          }
        }
      }
    });
    chart2.axis('月均降雨量', {
      line: null,
      tickLine: null,
      label: null
    });

    chart2.tooltip({
      showMarkers: false,
      shared: true
    });

    chart2
      .interval()
      .position('月份*月均降雨量')
      .color('name')
      .adjust([
        {
          type: 'dodge',
          marginRatio: 1,
        },
      ]);

    chart2.interaction('active-region');

    chart2.render();
  }
  eChart3(){
    const chart3 = new Chart({
      container: 'c3',
      autoFit: true,
      height: 300,
    });
    
    chart3.data(data3);
    chart3.scale('月均降雨量', {
      nice: true,
    });
    chart3.tooltip({
      showMarkers: false,
      shared: true,
    });
    
    chart3
      .interval()
      .position('月份*月均降雨量')
      .color('name')
      .adjust([
        {
          type: 'dodge',
          marginRatio: 0,
        },
      ]);
    
    chart3.interaction('element-highlight-by-x');
    
    chart3.render();
  }
  eChart4(){
    const chart4 = new Chart({
      container: 'c4',
      autoFit: true,
      height: 300,
    });
    
    chart4.data(data4);
    
    chart4.coordinate('theta', {
      radius: 0.85
    });
    
    chart4.scale('percent', {
      formatter: (val) => {
        val = val * 100 + '%';
        return val;
      },
    });
    chart4.tooltip({
      showTitle: false,
      showMarkers: false,
    });
    chart4.axis(false); // 关闭坐标轴
    const interval = chart4
      .interval()
      .adjust('stack')
      .position('percent')
      .color('item')
      .label('percent', {
        offset: -40,
        style: {
          textAlign: 'center',
          shadowBlur: 2,
          shadowColor: 'rgba(0, 0, 0, .45)',
          fill: '#fff',
        },
      })
      .tooltip('item*percent', (item, percent) => {
        percent = percent * 100 + '%';
        return {
          name: item,
          value: percent,
        };
      })
      .style({
        lineWidth: 1,
        stroke: '#fff',
      });
    chart4.interaction('element-single-selected');
    chart4.render();
    
    // 默认选择
    interval.elements[0].setState('selected', true);
  }
  render() {
    return (
      <div>
        <Row type='flex' justify='space-between' style={{ margin: '30px 0' }}>
          <Col span={5}>
            <Card hoverable>
              <Row type='flex' justify='space-around'>
                <Col span={12}>
                  <div style={{ fontSize: 36 }}>
                    <Icon type="usergroup-add" />
                  </div>
                </Col>
                <Col span={12}>
                  <p>New Visits</p>
                  <p>352,252</p>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable>
              <Row type='flex' justify='space-around'>
                <Col span={12}>
                  <div style={{ fontSize: 36 }}>
                    <Icon type="message" />
                  </div>
                </Col>
                <Col span={12}>
                  <p>New Visits</p>
                  <p>352,252</p>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable>
              <Row type='flex' justify='space-around'>
                <Col span={12}>
                  <div style={{ fontSize: 36 }}>
                    <Icon type="pay-circle" />
                  </div>
                </Col>
                <Col span={12}>
                  <p>New Visits</p>
                  <p>352,252</p>
                </Col>
              </Row>
            </Card>
          </Col>
          <Col span={5}>
            <Card hoverable>
              <Row type='flex' justify='space-around'>
                <Col span={12}>
                  <div style={{ fontSize: 36 }}>
                    <Icon type="shopping-cart" />
                  </div>
                </Col>
                <Col span={12}>
                  <p>New Visits</p>
                  <p>352,252</p>
                </Col>
              </Row>
            </Card>
          </Col>
        </Row>
        <Row style={{ margin: '30px 0' }}>
          <Col span={24}>
            <Card hoverable>
              <div id='c1'></div>
            </Card>
          </Col>
        </Row>
        <Row type='flex' justify='space-between' style={{ margin: '30px 0' }}>
          <Col span={7}>
            <Card hoverable>
              <div id='c2'></div>
            </Card>
          </Col>
          <Col span={7}>
            <Card hoverable>
              <div id='c3'></div>
            </Card>
          </Col>
          <Col span={7}>
            <Card hoverable>
              <div id='c4'></div>
            </Card>
          </Col>
        </Row>
      </div>
    )
  }
}

Dashboard.propTypes = {
};

export default connect()(Dashboard);
